require('./../css/home.scss') ;

import { PureComponent  } from 'react' ;

import { render } from 'react-dom';

// import connect from './../redux/connect';

import Link from './../component/CustomLink';

import ListOrder from "./common/list-order.component";

import { actions , connect } from 'mirrorx'


import Store from "./../redux-demo/index"; 
import indexAction from '../redux-demo/actions/actions';

import anime from 'animejs'


class Child extends PureComponent  {
    constructor( props ){
        super();
        const { match = {} } = props;
        const  { id } = match.params || {};
        this.topicId = id;

        this.typesList = [
            {
                name:'经典',
                className:'Classic',
                to:'/Classic'
            },
            {
                name:'冷门佳片',
                className:'coldMovie',
                to:'/coldMovie'
            },
            {
                name:'豆瓣高分',
                className:'highScore',
                to:'/highScore'
            },
            {
                name:'动作',
                className:'actionMovie',
                to:'/actionMovie'
            },
            {
                 name:'喜剧',
                className:'comedy',
                to:'/comedy'
            },
            {
                name:'',
                className:'',
                to:''
            }
        ]

        this.recommendMovie = [
            {
                name:'同时入选IMDB250和豆瓣电影250的电影' ,
                color:'#3BA94D',
                to:''
            },
            {
                name:'带你进入不正常的世界' ,
                color:'#2384E8',
                to:''
            },
            {
                name:'用电【影】来祭奠逝去的岁月' ,
                color:'#FFC46C',
                to:''
            },
            {
                name:'2015终极期待' ,
                color:'#FF4055',
                to:''
            },
            {
                name:'女孩们的故事【电影】' ,
                color:'#3BA94D',
                to:''
            },
            {
                name:'使用 App 【找电影】功能' ,
                color:'#3BA94D',
                to:''
            },
            {
                name:'科幻是未来的钥匙——科幻启示录【科幻题材】' ,
                color:'#3BA94D',
                to:''
            },
            {
                name:'2015终极期待' ,
                color:'#3BA94D',
                to:''
            },
            // {
            //     name:'美国生活面面观' ,
            //     color:'#3BA94D',
            //     to:''
            // },
            // {
            //     name:'经典韩国电影——收集100部' ,
            //     color:'#3BA94D',
            //     to:''
            // },
        ]
    }
    componentWillMount(){
        
    }
    getDetail(id){
        this.props.history.push(`/detail/${id}`);
    }

    componentWillReceiveProps(nextProps){
        const { match } = nextProps;
        const  { id } = match.params;
        if(this.topicId != id) {
            this.topicId = id;
            this.getAjax(this.topicId);
        }
    }
    componentDidMount(){
        console.log('11')
        this.getAjax(this.topicId);
        anime({
            targets: 'div.page',
            left: '0%', // Animate all divs left position to 80%
            opacity: .8, // Animate all divs opacity to .8
            easing: 'easeInOutQuad' ,
            delay:500,
          });
    }
    getAjax( id ){
        let { props } = this;
        // actions.app.getList1(12);
        Store.dispatch(indexAction.getList1({
            type:'GET_INDEX' ,
            id:id
        }))
    }
    render(){
        let lists = this.props.homeChild || [];
        
        return(
            <div className="page" ref="animate">
                <ListOrder lists={lists} ></ListOrder>
                <div className="list-content recommend-movie ">
                    <div className="header-title">
                        <div className="title-list">
                            <h2>推荐好电影</h2>
                        </div>
                    </div>
                    <div className="recommended-content">
                        <ul className="recommended-box clearfix">
                            {
                                this.recommendMovie.map((item,index) => {
                                    return (
                                        <li key={index} className="recommended" style={{borderColor:item.color}}>
                                            <Link to={'/home/rendering'} >
                                                <span style={{color:item.color}}>{item.name}</span>
                                            </Link>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                </div>
                <div className="types">
                    <h2>浏览分类</h2>
                    <ul>
                        {
                            this.typesList.map((item,index) =>{
                                return (
                                    <li key={index}>
                                        <Link>
                                            {item.name}
                                            <span></span>
                                        </Link>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
            </div>
        )
    }
}

// export default connect(state=>{
//     return {
//         homeChild:state.app.lists
//     }
// })( props=> (
//     <Child {...props}/>
// ));

export default connect((state) => {
    return {
        homeChild:state.lists
    }
})( Child );